<template>
  <div id="box"></div>
</template>

<script>
export default {
  name: "eCharts",
  data() {
    return {
      treedata:[{ //一定一定要注意这里有[]
        name: '鱼类',
        children: [
          {
            name: '罗非鱼',
          },
          {
            name: '灯笼鱼',
            children: [
              {
                name: '原产地’'
              }
            ]
          },
          {
            name: '紫红笛鲷'
          },
          {
            name: '乌鳢',
            children: [
              {
                name: '原产地'
              }
            ]
          },
          {
            name: '黄鳝'
          }
        ]
      }]
    }
  },
  methods: {
    tree() {
      var myChart = this.$echarts.init(document.getElementById("box"));
      var option;

     var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: this.treedata,

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 13
                },

                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.tree();
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 100%;
  height: 100%;
}
</style>
